import 'package:flutter/material.dart';
import 'package:fzcgx_app/common/adapter_utils.dart';
import 'package:fzcgx_app/common/assets_utils.dart';
import 'package:fzcgx_app/provider/provider_widget.dart';
import 'package:fzcgx_app/ui/base/base_view_model.dart';
import 'package:fzcgx_app/ui/my/factory/model/factory_device_model.dart';
import 'package:fzcgx_app/ui/my/factory/view_model/factory_device_view_model.dart';
import 'package:fzcgx_app/ui/widget/custom_appbar_widget.dart';


class FactoryDevicePage extends StatefulWidget {
  FactoryDevicePage({Key key,this.callback}) : super(key: key);
final Function callback;
  @override
  _FactoryDevicePageState createState() => _FactoryDevicePageState();
}

class _FactoryDevicePageState extends State<FactoryDevicePage> {
  FactoryDeviceViewModel viewModel;
  @override
  void initState() {
    viewModel = FactoryDeviceViewModel();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ProviderWidget<FactoryDeviceViewModel>(
      model: viewModel,
      onReady: (viewModel) {
        viewModel.requestApi();
      },
      builder: (context, viewModel, child) {
        return viewModel.state == ViewState.Success
            ? Scaffold(
                backgroundColor: Colors.white,
                appBar: CustomAppbar(
                  title: '工厂产品',
                ),
                body: SafeArea(
                    child: SingleChildScrollView(
                        child: _buildSuccessWidget(viewModel))),
                bottomNavigationBar: Container(
                  height: AdapterUtils.getHeight(135),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(
                        height: AdapterUtils.getHeight(15),
                      ),
                      Container(
                        height: AdapterUtils.getHeight(34),
                        margin: EdgeInsets.symmetric(
                            horizontal: AdapterUtils.getWidth(15)),
                        child: viewModel.selectModels.length == 0
                            ? Text(
                                '请选择您有的产品款式，选择不上限',
                                style: TextStyle(
                                  fontSize: AdapterUtils.getSp(13),
                                  color: Color(0xff99A2AD),
                                  fontWeight: FontWeight.w500,
                                ),
                              )
                            : Row(
                                children: <Widget>[
                                  Text(
                                    '已选择：',
                                    style: TextStyle(
                                      fontSize: AdapterUtils.getSp(14),
                                      color: Color(0xff606B79),
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                  Expanded(
                                      child: ListView.builder(
                                    scrollDirection: Axis.horizontal,
                                    itemCount: viewModel.selectModels.length,
                                    itemBuilder:
                                        (BuildContext context, int index) {
                                         
                                      return CustomDelChipWidget(
                                        model: viewModel.selectModels[index],
                                        onDeleteTap: (){
                                           viewModel.delChip(viewModel.selectModels[index]);
                                        },
                                      );
                                    },
                                  ))
                                ],
                              ),
                      ),
                      Container(
                          width: AdapterUtils.screenWidth(),
                          height: AdapterUtils.getHeight(50),
                          margin: EdgeInsets.all(15),
                          child: FlatButton(
                              onPressed: () {
                                 viewModel.postApi(context,widget.callback);
                              },
                              disabledColor: Color(0xff15A1FF).withAlpha(80),
                              color: Color(0xff15A1FF),
                              shape: RoundedRectangleBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(4)),
                              ),
                              child: Text(
                                '完成',
                                style: TextStyle(
                                  fontSize: AdapterUtils.getSp(16),
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500,
                                ),
                              ))),
                    ],
                  ),
                ))
            : Scaffold(
                backgroundColor: Colors.white,
              );
      },
    );
  }

  Widget _buildSuccessWidget(FactoryDeviceViewModel viewModel) {
    return SingleChildScrollView(
        child: Container(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
          SizedBox(
            height: AdapterUtils.getHeight(4),
          ),
          Container(
            height: AdapterUtils.getHeight(38),
            color: Color(0xffEAF7FE),
            child: Center(
              child: Text(
                '注册填写/上传的信息越全面，客户信任度越高',
                style: TextStyle(
                  fontSize: AdapterUtils.getSp(13),
                  color: Color(0xff15A1FF),
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
          SizedBox(
            height: AdapterUtils.getHeight(18),
          ),
          Container(
             margin: EdgeInsets.symmetric(horizontal: AdapterUtils.getWidth(15)),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  '设备选择',
                  style: TextStyle(
                    fontSize: AdapterUtils.getSp(16),
                    color: Color(0xff3B4859),
                    fontWeight: FontWeight.bold,
                  ),
                ),
                 SizedBox(
              height: AdapterUtils.getHeight(16),
            ),
            Text(
              '请选择产品，选择不上限',
              style: TextStyle(
                fontSize: AdapterUtils.getSp(13),
                color: Color(0xff99A2AD),
                fontWeight: FontWeight.w500,
              ),
            ),
             SizedBox(
              height: AdapterUtils.getHeight(16),
            ),
             Wrap(
              runSpacing: AdapterUtils.getHeight(10),
              spacing: AdapterUtils.getWidth(10),
              children:_buildChipWidges(viewModel),
            ),
                
              ],
            ),
          ),
          SizedBox(
            height: AdapterUtils.getHeight(88),
          ),
        ])));
  }
  List<Widget> _buildChipWidges(FactoryDeviceViewModel viewModel) {
    List<Widget> lists = List<Widget>();
    viewModel.models.forEach((element) {
    
      lists.add(CustomChipWidget(
        model: element,
        showBorder: false,
        backgroundColor: Color(0xffFAFAFA),
        selectBackgroundColor: Color(0xffEAF7FE),
        textColor: Color(0xff3B4859),
        onTap: (FactoryDeviceModel model) {
           viewModel.onSelectChip(context,element);
        },
      ));
    });
    lists.add(viewModel.isInput
        ? Container(
            child: TextField(
              controller: viewModel.nameController,
              textInputAction: TextInputAction.done,
              style: TextStyle(
                fontSize: AdapterUtils.getSp(14),
                color: Color(0xff15A1FF),
                fontWeight: FontWeight.w500,
              ),
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(
                      horizontal: AdapterUtils.getWidth(15),
                      vertical: AdapterUtils.getHeight(10)),
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(17.5),
                      borderSide: BorderSide.none),
                  hintText: '请输入款式名称',
                  hintStyle: TextStyle(
                    fontSize: AdapterUtils.getSp(14),
                    color: Color(0xff3B4859),
                    fontWeight: FontWeight.w500,
                  ),
                  filled: true,
                  // 设置背景色
                  fillColor: Color(0xffEAF7FE)),
              autofocus: true,
              onEditingComplete: () {
                viewModel.onAdd();
                viewModel.onInput();
              },
            ),
          )
        : InkWell(
            onTap: () {
              viewModel.onInput();
            },
            child: Container(
              padding: EdgeInsets.symmetric(
                  horizontal: AdapterUtils.getWidth(32),
                  vertical: AdapterUtils.getHeight(8)),
              decoration: BoxDecoration(
                  color: Color(0xffEAF7FE),
                  borderRadius: BorderRadius.all(Radius.circular(17.5))),
              child: Text(
                '添加+',
                style: TextStyle(
                  fontSize: AdapterUtils.getSp(14),
                  color: Color(0xff15A1FF),
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ));
    return lists;
  }
}
class CustomChipWidget extends StatefulWidget {
  final Color borderColor;
  final Color textColor;
  final Color selectBorderColor;
  final Color selectTextColor;
  final Color backgroundColor;
  final Color selectBackgroundColor;
  final FactoryDeviceModel model;
  final bool showBorder;
  final Function onTap;
  CustomChipWidget({
    Key key,
    this.borderColor = const Color(0xff99A2AD),
    this.textColor = const Color(0xff606B79),
    this.selectTextColor = const Color(0xff15A1FF),
    this.selectBorderColor = const Color(0xff15A1FF),
    this.backgroundColor = Colors.white,
    this.selectBackgroundColor=Colors.white,
    this.model,
    this.showBorder = true,
    this.onTap,
  }) : super(key: key);

  @override
  _CustomChipWidgetState createState() => _CustomChipWidgetState();
}

class _CustomChipWidgetState extends State<CustomChipWidget> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        widget.onTap(widget.model);
      },
      child: Container(
        padding: EdgeInsets.symmetric(
            horizontal: AdapterUtils.getWidth(15),
            vertical: AdapterUtils.getHeight(8)),
        decoration: BoxDecoration(
            color:_getBackgroundColor(),
            border: widget.showBorder
                ? Border.all(
                    color: widget.model.check
                        ? widget.selectBorderColor
                        : widget.borderColor,
                    width: 1)
                : Border(),
            borderRadius: BorderRadius.all(Radius.circular(17.5))),
        child: Text(
          widget.model.name,
          style: TextStyle(
            fontSize: AdapterUtils.getSp(14),
            color: widget.model.check
                ? widget.selectTextColor
                : widget.textColor,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }
  Color _getBackgroundColor(){
    if(widget.showBorder){
      return widget.backgroundColor;
    }else{
if(widget.model.check){
         return widget.selectBackgroundColor;
      }else{
         return widget.backgroundColor;
      }
    }
  }
}

class CustomDelChipWidget extends StatefulWidget {
  CustomDelChipWidget({Key key, this.onDeleteTap, this.model})
      : super(key: key);
  final Function onDeleteTap;
  final FactoryDeviceModel model;
  @override
  _CustomDelChipWidgetState createState() => _CustomDelChipWidgetState();
}

class _CustomDelChipWidgetState extends State<CustomDelChipWidget> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: widget.onDeleteTap,
      child: Container(
          padding: EdgeInsets.symmetric(
            horizontal: AdapterUtils.getWidth(15),
            //  vertical: AdapterUtils.getHeight(8)
          ),
          margin: EdgeInsets.only(right: AdapterUtils.getWidth(10)),
          decoration: BoxDecoration(
              border: Border.all(color: Color(0xffFF3D3E), width: 1),
              borderRadius: BorderRadius.all(Radius.circular(17.5))),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(
                widget.model.name,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: AdapterUtils.getSp(14),
                  color: Color(0xffFF3D3E),
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(
                width: AdapterUtils.getWidth(8),
              ),
            Padding(padding: EdgeInsets.only(top: AdapterUtils.getHeight(3)),child:  Image.asset(AssetsUtils.getAssetsImagesPath('close.png')),)
            ],
          )),
    );
  }
}